<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content">绑定手机号</p>
    </Yq-header>
    <div :style="boxStyle">
      <group gutter="0">
        <x-input title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile" v-model="userMobile"></x-input>
        <x-input title="验证码" class="weui-vcode" placeholder="请输入验证码" v-model="userCode">
          <x-button v-if="sendCode===false" slot="right" style="background: none;position: absolute;right: 6px;top: 10px;padding: 0 3px;font-size: 13px;color: #3d82e5;" type="primary" mini @click.native="sendCodeFn">获取验证码</x-button>
          <x-button v-if="sendCode===true" slot="right" style="background: none;position: absolute;right: 6px;top: 10px;padding: 0 3px;font-size: 13px;color: #636363;" type="primary" mini>{{time}}S后重新发送</x-button>
        </x-input>
      </group>
      <x-button type="primary" action-type="submit" style="width: 50%;position: relative;background: #3d82e5;font-size: 15px;top: 65%;" @click.native="setPassFn">立即绑定</x-button>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, XButton, XInput, Alert } from 'vux'
  import * as urls from '../../../api/urls'
  import YqHeader from '../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      XInput,
      Alert,
      YqHeader
    },
    data () {
      return {
        boxStyle: 'height: 200px;',
        show: false,
        message: '',
        userMobile: '',
        sendCode: false,
        time: 59,
        userCode: '',
        userPoints: 200,
        userRemainder: 500.23,
        userCard: 5,
        password: '',
        password2: ''
      }
    },
    methods: {
      setPassFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        if (that.userMobile === '' || that.userMobile === undefined || that.userMobile === null) {
          that.show = true
          that.message = '请填写手机号'
          return
        }
        if (that.userCode === '' || that.userCode === undefined || that.userCode === null) {
          that.show = true
          that.message = '请输入验证码'
          return
        }
        that.http(urls.bindingMobile, {userId: userId, mobile: that.userMobile, code: that.userCode}, function (res) {
          if (res.status === 100) {
            that.show = true
            that.message = '手机号绑定成功'
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      onHide () {
        if (this.message === '手机号绑定成功') {
          let params = {
            isShowHeader: false
          }
          this.$router.push({
            path: '/content/user/User',
            query: {
              params: JSON.stringify(params)
            }
          })
          this.$router.go(1)
        }
      },
      onShow () {
        console.log('on show')
      },
      setTime () {
        let interval
        let that = this
        let setTimeFn = function () {
          that.time--
          if (that.time < 0) {
            clearInterval(interval)
            that.sendCode = false
            that.time = 59
          }
        }
        interval = setInterval(function () {
          setTimeFn()
        }, 1000)
      },
      sendCodeFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        if (that.userMobile === '' || that.userMobile === undefined || that.userMobile === null) {
          that.show = true
          that.message = '请填写手机号'
          return
        } else {
          that.http(urls.sendCode, {userId: userId, mobile: that.userMobile}, function (res) {
            if (res.status === 100) {
              that.sendCode = true
              that.setTime()
            } else {
              that.show = true
              that.message = res.errMsg
            }
          }, function (res) {
            that.show = true
            that.message = res.errMsg
          })
        }
      }
    },
    mounted: function () {
      this.boxStyle = 'padding-top: 38px;height:' + (document.body.clientHeight - 38) + 'px'
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
    }
  }
</script>

<style scoped="scoped">
  .userPassPrompt{
    width: 100%;
    font-size: 14px;
  }
  .userPassPrompt > span{
    color: red;
    display: inline-block;
    vertical-align: middle;
    margin: 6px 3px 0 14px;
  }
  .weui_cell_ft{
    position: relative;
    right: -10px;
  }
  .weui_btn:after{
    border: none !important;
  }
</style>
